<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common" th:with="title='菜单列表'"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div th:include="model" id="modelHtml"></div>
<div th:include="main-header"></div>
<div class="content-wrapper">
    <section class="content">
        <div class="panel panel-default">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel-heading">菜单列表</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input type="text" id="menuName"
                                           class="form-control" placeholder="菜单名称"/>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <button type="button" id="searchData" class="btn btn-primary">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel-body">
                        <div id="toolbar" class="btn-group">
                            <button type="button" class="btn btn-block btn-primary" style="width:100px;" id="addBtn">
                                新增
                            </button>
                        </div>
                        <table id="menuTable" class="table table-bordered table-hover"></table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div th:include="main-footer"></div>

<!-- 新增弹框 -->
<div class="modal fade" id="blogModal" tabindex="-1" role="dialog" aria-labelledby="blogModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content box box-solid box-info">
            <div class="modal-header box-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title box-title">消息</h4>
            </div>
            <div class="modal-body"></div>

            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="saveBtn" name="addButton">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="removeMenuId"/>
<script type="text/javascript">
    initBootStrapTable();
    function initBootStrapTable() {
        $("#menuTable").bootstrapTable('destroy');
        $('#menuTable').bootstrapTable({
            url: '/menu/data', /*数据获取地址*/
            classes: 'table table-hover table-no-bordered',
            method: 'post', /*提交方式*/
            pagination: false, /*是否显示分页工具条*/
            search: false, /*启用本地搜索框*/
            clickToSelect: true, /*点击选中列*/
            uniqueId: 'id', /*主键列*/
            toolbar: '#toolbar', /*工具按钮用哪个容器*/
            showRefresh: false, /*刷新按钮*/
            showToggle: false, /*显示详细视图和列表视图的切换按钮*/
            showPaginationSwitch: false, /*数据条数选择框*/
            showColumns: false, /*内容列下拉框*/
            detailView:true,
            queryParamsType: '', /*向服务端发送参数的格式*/
            contentType: "application/x-www-form-urlencoded",
            queryParams: {searchText: $("#menuName").val(), pid:$("#menuName").val()==''? 0 :''},
            columns: [{
                field: 'id',
                title: '菜单id'
            }, {
                field: 'name',
                title: '菜单名称'
            }, {
                field: 'scort',
                title: '顺序',
            }, {
                field: 'useruuid',
                title: '操作',
                formatter: function (value, row, index) {
                    return [
                        '<a href="javascript:void(0);"  onclick="javascript:update(' + row.id + ');">修改</a>&nbsp;'
                        + '<a href="javascript:void(0);" onclick="javascript:remove(' + row.id + ');">删除</a>',
                    ].join('');
                }
            },] ,
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                childrenInitSubTable(index, row, $detail);
            }
        });
    }

    function childrenInitSubTable (index, row, $detail) {
        var parentid = row.id;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: '/menu/data', /*数据获取地址*/
            classes: 'table table-hover table-no-bordered',
            method: 'post', /*提交方式*/
            pagination: false, /*是否显示分页工具条*/
            search: false, /*启用本地搜索框*/
            minimumCountColumns: 10, /*当列数小于此值时，将隐藏内容列下拉框*/
            clickToSelect: true, /*点击选中列*/
            uniqueId: 'id', /*主键列*/
            showToggle: false, /*显示详细视图和列表视图的切换按钮*/
            showColumns: false, /*内容列下拉框*/
            queryParamsType: '', /*向服务端发送参数的格式*/
            contentType: "application/x-www-form-urlencoded",
            queryParams: { searchText: $("#menuName").val(), pid:parentid},
            showHeader: false,
            columns: [{
                field: 'value',
                width: '1.5%',
                formatter: function (value, row, index) {
                    return "";
                }
            },{
                field: 'id',
                title: '菜单id',
                width: '19%'
            }, {
                field: 'name',
                title: '菜单名称',
                width: '41%'
            }, {
                field: 'scort',
                title: '顺序',
                width: '15%'
            }, {
                field: 'useruuid',
                title: '操作',
                width: '33.5%',
                formatter: function (value, row, index) {
                    return [
                        '<a href="javascript:void(0);"  onclick="javascript:update(' + row.id + ');">修改</a>&nbsp;'
                        + '<a href="javascript:void(0);" onclick="javascript:remove(' + row.id + ');">删除</a>',
                    ].join('');
                }
            },]
        });
    };

    $(function () {
        $("#searchData").click(function () {
            searchData();
        });
        $("#addButton").click(function () {
            addButton();
        });
        $("#addBtn").click(function () {
            add();
        });
        $("#delButton").click(function () {
            confirmDelItem();
        });
        $('#menuName').on('keypress', function (event) {
            if (event.keyCode == 13) {
                searchData();
            }
        });
    });

    function searchData() {
        initBootStrapTable();
    }

    //保存数据（新增，更新）
    function addButton() {
        check_form($('#menuId').val());
    }

    //添加数据
    function add() {
        $('#addModal .modal-body').html('');
        $('#addModalTitle').text('新增');
        $.ajax({
            url: '/menu/menuForm',
            type: "get",
            async: false,
            success: function (data) {
                $('#addModal .modal-body').html(data);
            }
        });
        $('#addModal').modal({keyboard: true, backdrop: true})
    }

    function update(id) {
        $('#addModal .modal-body').html('');
        $('#addModalTitle').text('编辑');
        var data = {};
        data.id = id;
        $.ajax({
            url: '/menu/menuForm',
            data: data,
            type: "post",
            async: false,
            success: function (data) {
                $('#addModal .modal-body').html(data);
            }
        });
        $('#pid').val($("#editPid").val());
        $('#addModal').modal({keyboard: true, backdrop: true})
    }


    function confirmDelItem() {
        var data = {};
        data.id = $.trim($("#removeMenuId").val());
        $.ajax({
            type: 'POST',
            url: '/menu/remove',
            data: data,
            async: false,
            success: function (data) {
                $('#delModal').modal('hide');
                if (data) {
                    var obj = eval("(" + data + ")");
                    if (obj[0].code == 1) {//操作成功
                        refresh();
                    } else {//操作失败
                        alert("删除失败");
                    }
                }
            },
            error: function () {
                $('#delModal').modal('hide');
            }
        });
        refresh();
    }

    function check_form(id) {
        var url = (id == null || id == ''  ) ? '/menu/add' : 'menu/edit';
        var data = {};
        data.id =
            $.ajax({
                url: url,
                data: $("#blogForm").serialize(),
                type: "post",
                async: false,
                success: function (data) {
                    if (data) {
                        var obj = eval("(" + data + ")");
                        if (obj[0].code == 1) {//操作成功
                            $('#addModal').modal('toggle');
                            refresh();
                        } else {//操作失败
                            $("#msg").html(obj[0].msg);
                        }
                    }
                },
                error: function () {

                }
            });
    }
    function remove(menuId) {
        $("#removeMenuId").val(menuId);
        $('#delModal .modal-body').html("<p>您确认要删除吗？</p> ");
        $('#delModal').modal({keyboard: true, backdrop: true});
    }

    function refresh() {
        $("#menuTable").bootstrapTable('refresh');
    }
</script>
</body>
</html>